<!DOCTYPE html>
<html>
<head>
    <title>Interface Screen 1</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="scripts/dynamicButtons.js"></script>
    <script type="text/javascript" src="scripts/jquery-2.0.1.min.js"></script>   
    <script type="text/javascript" src="scripts/fade.js"></script>
    <link type="text/css" href="scripts/jquery.toastmessage-min.css" rel="stylesheet"/>
    <script type="text/javascript" src="scripts/jquery.toastmessage-min.js"></script>
    <script type="text/javascript" src="scripts/back.js"></script>
    <script type="text/javascript" src="scripts/selected.js"></script>
</head>
<body id="background">
    <div id="content">
		<div id="musicList" class="transparentBg">
			<div class="centreText"><h2>Streams</h2></div>
				<a href="player.html">
				<table class="playlist">
					<td><h3 class="title">Genre</h3></td><td><img style="visibility: hidden" name="cloud1" class="thumb" src="images/cloud-icon.png" /></td>
					<tr><td><img class="thumb" src="images/rock.jpg" /></td><td class="selectable-h selectable-a">Rock</td></tr>
					<tr><td><img class="thumb" src="images/jpop.jpg" /></td><td class="selectable-h selectable-a">JPop</td></tr>
					<tr><td><img class="thumb" src="images/hiphop.jpg" /></td><td class="selectable-h selectable-a">Hiphop</td></tr>
					<tr><td><img class="thumb" src="images/dance.jpg" /></td><td class="selectable-h selectable-a">Dance</td></tr>
					
					<td><h3 class="title">Social</h3></td><td><img style="visibility: hidden" name="cloud2" class="thumb" src="images/cloud-icon.png" /></td>
					<tr><td><img class="thumb" src="images/facebook.jpg" /></td><td class="selectable-h selectable-a">Facebook Friends</td></tr>
					<tr><td><img class="thumb" src="images/contacts.jpg" /></td><td class="selectable-h selectable-a">Contacts</td></tr>
					<tr><td><img class="thumb" src="images/new.jpg" /></td><td class="selectable-h selectable-a">New Recommendations</td></tr>
					<tr><td><img class="thumb" src="images/local.jpg" /></td><td class="selectable-h selectable-a">Locally Trending</td></tr>
				</table>
				</a>
		</div>

		<div id="settings-button" class="transparentBg">
			<a href="settings.html"><img id="settings-icon" src="images/settings-icon.png"></a>
		</div>
		
		<div id="navigation-bar" class="transparentBg">
			<div class="navigation-button">
				<a onclick="thumbsdown()" ><img name="thumbsDown" src="images/thumbs/down.jpg" /></a> <!-- Change link later -->
			</div>
			<div class="navigation-button">
				<a href="q.html">
			<img src="images/q.jpg" />
				</a>
			</div>
			<div class="navigation-button">
				<a onclick="playPause()" ><img name="playpause" src="images/play.jpg" /></a>
			</div>
			<div class="navigation-button">
				<img src="images/next.jpg" />
			</div>
			<div class="navigation-button">
				<a onclick="thumbsup()" ><img name="thumbsUp"  src="images/thumbs/up.jpg" /></a><!-- Change link later -->
			</div>
		</div>

		<div id="cloud-button" class="transparentBg">
			<a onclick="cloudsVisible()"><img id="cloud-icon" src="images/cloud-icon.png"></a>
		</div>
    </div>
</body>
</html>